<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据展示</title>
    <link rel="stylesheet" href="../css/wodry.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/public.css">

    <style>
        .red_light {
            width: .4rem;
            height: .4rem;
            border-radius: 50%;
            display: inline-block;
            background-color: red;
        }

        .yellow_light {
            width: .4rem;
            height: .4rem;
            border-radius: 50%;
            display: inline-block;
            background-color: yellow;
        }

        .green_light {
            width: .4rem;
            height: .4rem;
            border-radius: 50%;
            display: inline-block;
            background-color: green;
        }

        .light {
            width: .4rem;
            height: .4rem;
            background-color: #777777;
            border-radius: 50%;
            display: inline-block;
        }

    </style>
    <script src="../scripts/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {

            $('#scrollList').html('');
            for(var i = 0; i < 20; i++) {
                var status = '等待中';
                if(i % 2 == 0) {
                    status = "AGV搬運中"
                } else if(i % 3 == 0) {
                    status = "平台作業中"
                }
                var msg = '<li><div class="fontInner clearfix"><span>BDA03800022' + i + '</span><span>' + status + '</span></div></li>';
                $('#scrollList').append(msg);
            }

            $('.myscroll').myScroll({
                speed: 300, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });

            let r = document.getElementById('resourceStatusSpan');
            r.style["background-color"] = "green";
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<body>

<div class="main">
    <!--<div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                出入料平台
            </div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>
    </div>-->

    <div class="center">
        <div class="center-right fr">
            <div class="right-top">
                <!--<div class="title" style="font-size: x-large">設備狀態</div>-->
                <div style="text-align: center; text-decoration: underline; font-size: x-large; margin-top: 30px;">設備狀態</div>
                <div style="text-align: center; margin-top: 10px;">
                    <span class="green_light"></span>
                </div>
                <div style="text-align: center; font-size: large; font-weight: lighter;">待機中</div>
                <div style="text-align: center; margin-top: 5px;">
                    <span class="yellow_light"></span>
                </div>
                <div style="text-align: center; font-size: large; font-weight: lighter;">作業中</div>
                <div style="text-align: center; margin-top: 5px;">
                    <span class="red_light"></span>
                </div>
                <div style="text-align: center; font-size: large; font-weight: lighter;">異常</div>
                <div style="text-align: center; text-decoration: underline; font-size: x-large; margin-top: 30px;">人員操作指示</div>
                <div style="text-align: center; margin-top: 10px;">
                    <ul style="list-style: disc inside;font-size: large;">
                        <li>請補棧</li>
                        <li>請上料</li>
                        <li>請取貨</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="center-left fl">
            <div class="left-top rightTop border">
                <!--<h1 id="ceshi">数据可视化</h1>-->
                <div class="title" style="font-size: x-large">設備狀態</div>
                <div class="top-list">
                    <div style="text-align:center;margin-top:.2rem">
                        <span id="resourceStatusSpan" class="light" style="width: 1.8rem;height:1.8rem;"></span>
                        <!--<span style="font-size: large">待機中</span>-->
                    </div>
                    <div style="text-align:center;font-size: large;">待機中</div>
                </div>
            </div>
        </div>
        <div class="center-left fl">
            <div class="left-top rightTop border">
                <div class="title" style="font-size: x-large">人員操作指示</div>
                <div style="text-align:center;margin-top:.1rem;line-height:2.5rem;vertical-align: middle;">
                    <span style="font-size: 1rem; font-weight: lighter; color: yellow;">請補棧</span>
                </div>
            </div>
        </div>

        <div class="center-cen fl">
            <div class="left-top rightTop border">
                <!--<h1 id="ceshi">数据可视化</h1>-->
                <div class="echart wenzi">
                    <div class="gun" style="text-align: center">
                        <div align="center"><hr width="70%" color="#7D98C7" size="1" style="margin-bottom: 10px"></div></p>
                        <div   class="fontInner clearfix">
                            <span>工令號碼</span>
                            <span>狀態</span>
                        </div>
                        </div>
                    </div>
                    <div align="center"><hr width="70%" color="#7D98C7" size="1" style="margin-top: 10px"></div></p>
                    <div id="FontScroll" class="myscroll">
                        <ul id="scrollList">
                            <!--<li>
                                <div class="fontInner clearfix">
                                    <span>BDA03800010</span>
                                    <span>AGV搬運中</span>
                                </div>
                            </li>-->
                        </ul>
                    </div>
                <div align="center"><hr width="70%" color="#7D98C7" size="1" style="margin-top: 10px"></div></p>
            </div>
        </div>

    </div>


</div>
<!--<script src="js/mymap.js"></script>-->
<script src="../scripts/wordy.min.js"></script>
<script src="../scripts/fontscroll.js"></script>
<script src="../scripts/echarts.min.js"></script>
<script src="../scripts/vue.min.js"></script>
<script src="../scripts/datav.min.vue.js"></script>

<script>
</script>

</body>
</html>